<template>
    <div :class="customer">
        <transition name="modal">
            <div v-if="visible" class="modalBg" :style="{zIndex:zIndex}">
                <div class="modal" :style="{width:width+'px',top:top+'px'}">
                    <div class="title"><span>{{title}}</span><i class="el-icon-close" @click="closemodal"></i></div>
                    <div class="modalBody">
                        <slot></slot>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: 'modal',
        props: {
            title: {
                type: String,
                default: '标题',
            },
            visible: {
                required: true,
            },
            width: {
                default: 500,
            },
            customer: {
                default: '',
            },
            zIndex: {
                default: 999,
            },
            top: {
                default: 60,
            },
        },
        methods: {
            closemodal() {
                this.$emit('close');
            },
        },
    };
</script>

<style scoped lang="scss">
    .modalBg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.30);
        overflow: scroll;
        padding: 50px;
    }

    .modal {
        position: absolute;
        left: 50%;
        @include container-border;
        transform: translateX(-50%);
        margin-bottom: 100px;
        background: #FFFFFF;
        border-radius: 10px;
        overflow: hidden;
        .title {
            font-size: 18px;
            position: relative;
            background: #FFFFFF;
            color: #333333;
            box-shadow: inset 0 -1px 0 0 #D8D8D8;
            border-color: #aaaaaa;
            span {
                padding: 10px 20px;
            }
            i {
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: pointer;
                font-weight: bold;
                color: #D8D8D8;
            }
            i:hover {
                color: #1989FA;
            }
        }
        .modalBody {
            padding: 10px 20px;
        }

    }

    .modal-enter-active, .modal-leave-active {
        transition: all .3s;
    }

    .modal-enter, .modal-leave-to {
        opacity: 0;
    }
</style>